<template>
  <div>
    <el-form @submit.native.prevent ref="editForm">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item>
            <el-input
              v-model="text"
              prefix-icon="el-icon-search"
              placeholder="搜索字典名称"
              @keyup.enter.native="search()"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="search()">查询 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="add()">增加 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="deleteSelection"
              >批量删除
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%; margin-bottom: 5px"
      border
      @selection-change="handleSelectionChange"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="selection"> </el-table-column>
      <!-- <el-table-column property="dictId" label="ID">
            </el-table-column> -->
      <el-table-column property="remark" label="标识码"> </el-table-column>
      <el-table-column property="dictName" label="字典名称"> </el-table-column>
      <el-table-column property="dictValue" label="字典值"> </el-table-column>
      <!-- <el-table-column property="index" label="排序" sortable>
            </el-table-column> -->
      <el-table-column property="parentId" label="父级字典"> </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="rowEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="rowDel(scope.row.dictId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="size"
      :current-page="current"
      :total="total"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 弹出层 -->
    <DataAdd
      ref="dataAdd"
      v-if="addShow"
      :addShow="addShow"
      @dialogClose="dialogClose"
      @close="dataDictionaryList"
    >
    </DataAdd>
    <DataEdit
      ref="dataEdit"
      v-if="editShow"
      :editShow="editShow"
      :record="formFileds"
      @dialogClose="dialogClose"
      @close="dataDictionaryList"
    >
    </DataEdit>
  </div>
</template>

<script>
import DataAdd from "./dataAdd.vue";
import DataEdit from "./dataEdit.vue";
import {
  dataDictionaryFind,
  findByName,
  deleltebatch,
  dataDictionaryDelete,
  ipage,
} from "@/api/systemManage/dataDictionary";

export default {
  name: "dataManage",
  components: {
    DataAdd,
    DataEdit,
  },
  data() {
    return {
      text: "",
      size: 10,
      current: 1,
      total: 0,
      formFileds: {},
      multipleSelection: [],
      tableData: [],
      addShow: false,
      editShow: false,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogClose() {
      this.addShow = false;
      this.editShow = false;
    },

    rowEdit(row) {
      // //当前选中行
      this.formFileds = row;
      this.editShow = true;
    },

    search() {
      //let input = this.text;
      this.dataDictionaryList();
    },
    //findByName("input=" + input).then((res) => {
    //  this.tableData = res.data;
    //});

    add() {
      this.addShow = true;
    },
    rowDel(id) {
      // 让当前删除按钮失焦
      // event.target.blur();
      this.$confirm("确定要删除当前行吗？", "删除", {
        comfirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        dataDictionaryDelete("dictId=" + id).then((res) => {
          if (res) {
            this.$message.success("删除成功！");
            this.dataDictionaryList();
          }
        });
      });
    },
    currentChange(e) {
      this.current = e;
      this.dataDictionaryList();
    },
    sizeChange(e) {
      this.size = e;
      this.dataDictionaryList();
    },
    dataDictionaryList() {
      var par;
      par = {
        input: this.text,
        size: this.size,
        current: this.current,
      };
      ipage(par).then((res) => {
        if (res) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
        /* this.tableData = res.data; */
      });
    },
    deleteSelection() {
      if (!this.multipleSelection) {
        this.$message.warning("请至少选择一条数据进行删除！");
        return;
      } else {
        this.$confirm("数据将会永久删除，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }).then(() => {
          let array = [];
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let obj = this.multipleSelection[i].dictId;
            array.push(obj);
          }
          let obj = { ids: array };
          console.log("选中的id===" + JSON.stringify(obj));
          deleltebatch(obj).then((res) => {
            if (res) {
              this.$message.success("删除成功！");
              this.dataDictionaryList();
            }
          });
        });
      }
    },
  },
  mounted() {
    this.dataDictionaryList();
  },
};
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}
</style>
